import React, { Component } from 'react'
import MovieItem from './MovieItem';
export default class MovieList extends Component {

  render() {
    console.log('Movie List props', this.props);
    let { currentCinema, currentDate, cinemaKeys, dateKeys, currentList } = this.props.moive;

    console.log('currentCinema', currentCinema);


    return (
      <div>

        <h3>影院列表</h3>
        <p>选中影院:{currentCinema} 选中日期：{currentDate}</p>

        <div className="movieWrapper">
          <div className="left">
            {cinemaKeys.map((cinema, i) => {
              return <div key={i} onClick={() => {
                this.props.selectMoives(cinema, currentDate);
              }} className={currentCinema === cinema ? 'cinemaTab active' : 'cinemaTab'}>{cinema}</div>
            })}
          </div>
          <div className="right">
            <div className="tabs">
              {dateKeys.map((date, i) => {
                return <span key={i} onClick={() => {
                  this.props.selectMoives(currentCinema, date);
                }} className={currentDate === date ? 'active' : ''}>{date}</span>
              })
              }
            </div>

            <div className="list">
              {currentList.map((v, i) => {
                return <MovieItem key={i} item={v}></MovieItem>
              })}

            </div>
          </div>
        </div>







      </div>
    )
  }
}

